<template>
  <view class="payment-page">
    <view class="header">
      <view class="order-total-header">
        订单总价：<span style="color: red">¥{{ orderInfo.totalPrice }}</span>
      </view>
      <button class="cancel-button" @click="cancelPayment">取消支付</button>
    </view>
    <view class="order-total">
    </view>
    <view class="payment-methods">
      <view class="method-item" @click="selectPaymentMethod('alipay')">
        <image src="../../static/icons/alipay.png" mode="aspectFill" class="method-icon"></image>
        <view class="method-name">支付宝支付</view>
        <view v-if="selectedPaymentMethod === 'alipay'" class="selected-icon">✔</view>
      </view>
      <view class="method-item" @click="selectPaymentMethod('wechat')">
        <image src="../../static/icons/wechat.png" mode="aspectFill" class="method-icon"></image>
        <view class="method-name">微信支付</view>
        <view v-if="selectedPaymentMethod === 'wechat'" class="selected-icon">✔</view>
      </view>
    </view>
    <button class="pay-now-button" @click="payNow">立即支付</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {},
      selectedPaymentMethod: null
    };
  },
  onLoad(options) {
    const orderId = options.orderId;
    if (orderId) {
      this.fetchOrderInfo(orderId);
    } else {
      console.error('未获取到订单ID');
      uni.showToast({
        title: '未获取到订单ID，请重试',
        icon: 'none'
      });
    }
  },
  methods: {
    async fetchOrderInfo(orderId) {
      try {
        const response = await this.$axios.get(`http://localhost:3000/order/${orderId}`);
        this.orderInfo = response.data;
      } catch (error) {
        console.error('获取订单信息失败', error);
        uni.showToast({
          title: '获取订单信息失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    selectPaymentMethod(method) {
      this.selectedPaymentMethod = method;
    },
    async payNow() {
      if (!this.selectedPaymentMethod) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        });
        return;
      }
      try {
        // 获取原始订单数据
        const originalOrderResponse = await this.$axios.get(`http://localhost:3000/order/${this.orderInfo.id}`);
        const originalOrder = originalOrderResponse.data;
        // 复制原始订单数据
        const updatedOrder = {...originalOrder };
        // 修改订单状态
        updatedOrder.orderStatus = '运输中';
        // 发送更新后的数据给后端
        await this.$axios.put(`http://localhost:3000/order/${this.orderInfo.id}`, updatedOrder);

        uni.showToast({
          title: '支付成功',
          icon:'success'
        });
        uni.navigateBack({
          delta: 2
        });
      } catch (error) {
        // 获取原始订单数据
        const originalOrderResponse = await this.$axios.get(`http://localhost:3000/order/${this.orderInfo.id}`);
        const originalOrder = originalOrderResponse.data;
        // 复制原始订单数据
        const updatedOrder = {...originalOrder };
        // 修改订单状态为待支付
        updatedOrder.orderStatus = '待支付';
        // 发送更新后的数据给后端
        await this.$axios.put(`http://localhost:3000/order/${this.orderInfo.id}`, updatedOrder);

        console.error('支付失败', error);
        uni.showToast({
          title: '支付失败，请稍后重试',
          icon: 'none'
        });
        uni.navigateBack({
          delta: 2
        });
      }
    },
    async cancelPayment() {
      try {
        // 获取原始订单数据
        const originalOrderResponse = await this.$axios.get(`http://localhost:3000/order/${this.orderInfo.id}`);
        const originalOrder = originalOrderResponse.data;
        // 复制原始订单数据
        const updatedOrder = {...originalOrder };
        // 修改订单状态为待支付
        updatedOrder.orderStatus = '待支付';
        // 发送更新后的数据给后端
        await this.$axios.put(`http://localhost:3000/order/${this.orderInfo.id}`, updatedOrder);

        uni.showToast({
          title: '已取消支付',
          icon: 'none'
        });
        // 跳转到order订单页
        uni.switchTab({
          url: '/pages/order/order' // 假设order订单页的路径是/pages/order/order，根据实际情况修改
        });
      } catch (error) {
        console.error('取消支付失败', error);
        uni.showToast({
          title: '取消支付失败，请稍后重试',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
.payment-page {
  padding: 20px;
  background-color: #f8f8f8;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-total-header {
  font-size: 20px;
  color: #333;
}

.cancel-button {
  background-color: #f5222d;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  margin-right: unset;
}

.order-total {
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.payment-methods {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  position: relative;
}

.method-item:last-child {
  border-bottom: none;
}

.method-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.method-name {
  font-size: 18px;
  color: #333;
}

.selected-icon {
  position: absolute;
  right: 0;
  color: #1890ff;
  font-size: 20px;
}

.pay-now-button {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.pay-now-button:hover {
  background-color: #007bff;
}
</style>